<template>
    <!-- 会员管理 -->
    <div class="user" style="padding: 0px;">
        <el-card>
            <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="关键字查询">
                    <el-input v-model="searchForm.keyword" @keyup.enter.native="onSubmit" placeholder="关键字查询"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
                    <el-button @click="onReset" icon="Refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top:5px;">
            <el-button @click="addClick" icon="Plus">添加券包</el-button>
            <el-table size="small" :data="tableData" border style="width: 100%;margin-top:10px;" v-loading="loading" stripe>
                <el-table-column prop="title" label="会员券包标题"></el-table-column>
                <el-table-column prop="price" label="会员券包价格"></el-table-column>
                <el-table-column prop="giveBalance" label="赠送余额"></el-table-column>
                <el-table-column prop="gradeId" label="券包等级">
                    <template #default="scope">
                        <el-select v-model="scope.row.gradeId" disabled>
                            <el-option v-for="item in leves" :label="item.name" :value="item.gradeId"
                                :key="item.gradeId">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="maxBuyCount" label="用户可购买次数"></el-table-column>
                <el-table-column prop="statis" label="状态">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status === 1">
                            有效
                        </el-tag>
                        <el-tag type="error" v-else>
                            无效
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column fixed="right" label="操作" width="190">
                    <template #default="scope">
                        <el-button @click="editClick(scope.row)" type="text" size="small"
                            v-auth="'/user/coupon/edit'">编辑
                        </el-button>
                        <el-button @click="deleteClick(scope.row)" type="text" size="small"
                            v-auth="'/user/coupon/edit'">删除
                        </el-button>
                        <el-button @click="viewClick(scope.row)" type="text" size="small"
                            v-auth="'/user/coupon/edit'">查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-top:10px;margin-bottom:10px;float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
        </el-card>
    </div>
</template>

<script>
import PackageApi from '@/api/package'
import { defaultPageSize } from '@/utils/table.js'
export default {
    data() {
        return {
            /*是否加载完成*/
            loading: false,
            curPage: 1,
            pageSize: 20,

            /*列表数据*/
            tableData: [],
            /*一共多少条数据*/
            totalDataNumber: 0,
            searchForm: {
                pageIndex: 1,
                pageSize: defaultPageSize,
                keyword: '',
                pageSorts: []
            },
            leves: []
        };
    },
    created() {
        /*获取列表*/
        this.loadLevels()
        this.getTableList();

    },
    methods: {
        /*每页多少条*/
        handleSizeChange(val) {
            this.curPage = 1;
            this.pageSize = val;
            this.getTableList();
        },
        /*选择第几页*/
        handleCurrentChange(val) {
            let self = this;
            this.curPage = val;
            self.getTableList();
        },
        /*获取列表*/
        getTableList() {
            let self = this;
            self.loading = true
            self.searchForm.pageIndex = self.curPage;
            self.searchForm.pageSize = self.pageSize;
            PackageApi.getPagePacks(self.searchForm, true)
                .then((res) => {
                    self.loading = false;
                    const { code, data } = res
                    if (code === 1) {
                        const { total } = data
                        self.totalDataNumber = total
                        self.tableData = data.records
                    }
                    console.log('券包列表数据', res)
                })
                .catch((error) => {
                    self.loading = false;
                });
        },
        /*搜索查询*/
        onSubmit() {
            let self = this;
            self.searchForm.pageIndex = 1;
            self.getTableList();
        },
        onReset(){
            let self = this;
            self.searchForm.keyword = null;
            self.searchForm.pageIndex = 1;
            self.getTableList();
        },
        /*打开添加*/
        addClick(item) {
            this.$router.push({
                path: '/user/coupon/add'
            })
        },
        /*打开编辑*/
        editClick(item) {
            let params = item.id;
            this.$router.push({
                path: "/user/coupon/edit",
                query: {
                    id: params,
                },
            });
        },
        viewClick(item) {
            let params = item.id;
            this.$router.push({
                path: "/user/coupon/view",
                query: {
                    id: params,
                },
            });
        },
        deleteClick(row) {
            let self = this;

            ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    self.loading = true;
                    PackageApi.deleteCouponPack(
                        row.id,
                        true
                    )
                        .then((data) => {
                            self.loading = false;
                            if (data.code == 1) {
                                ElMessage({
                                    message: "恭喜你，删除成功",
                                    type: "success",
                                });
                                self.getTableList();
                            } else {
                                self.loading = false;
                            }
                        })
                        .catch((error) => {
                            self.loading = false;
                        });
                })
                .catch(() => { });
            //   deleteCouponPack
        },
        loadLevels() {
            const $this = this
            PackageApi.getAllGrade()
                .then(result => {
                    const { code, data } = result
                    if (code === 1) {
                        $this.leves = data
                    }
                })
        },
    },
};
</script>
<style></style>